<template>
	<view class="padd">
		<mod-tit modTit="咨询人信息" smTit="必填" :mustFlag="true"></mod-tit>
		<view class="tips">请确保真实的咨询人信息，为了保障来访者权益和咨询的真实性，请填写咨询人</view>
		<view class="modCon">
			<view class="formItem">
				<view class="formTit">真实姓名</view>
				<view class="formItemCon"> 
					<input class="formInp" v-model="userName" type="text" maxlength="6" placeholder="请输入真实姓名"  placeholder-style="color:#858585"/>
				</view>
			</view>
			<view class="formItem">
				<view class="formTit">性别</view>
				<view class="formItemCon">
					<view class="sexTag"
						:class="[sexIndex == index ? 'active' : '']"
						v-for="(item,index) in sexArr"
						:key="index"
						@tap="selectSex(index,item.name)"
					>{{item.name}}</view>
				</view>
			</view>
			<view class="formItem">
				<view class="formTit">联系电话</view>
				<view class="formItemCon">
					<input class="formInp" v-model="phoneNum" type="tel" maxlength="11" placeholder="请输入手机号码"/>
				</view>
			</view>
		</view>
		<mod-tit modTit="紧急联系人" smTit="必填" :mustFlag="true"></mod-tit>
		<view class="tips">仅在紧急危险的情况，平台无法联系到咨询人时使用</view>
		<view class="modCon">
			<view class="formItem">
				<view class="formTit">紧急联系人</view>
				<view class="formItemCon">
					<input class="formInp" v-model="lxrName" type="text" placeholder="请输入紧急联系姓名"/>
				</view>
			</view>
			<view class="formItem">
				<view class="formTit">你们的关系</view>
				<view class="formItemCon">
					<picker class="zxrPicker" @change="bindSelect" :value="relationIndex" :range="relationArr" range-key="name">
						<text>{{relationArr[relationIndex].name}}</text>  
						<text class="iconfont icon-sanjiao"></text> 
					</picker>
				</view>
			</view>
			<view class="formItem">
				<view class="formTit">联系电话</view>
				<view class="formItemCon">
					<input class="formInp" v-model="lxrTel" type="tel" maxlength="11" placeholder="请输入手机号码"/>
				</view>
			</view>
		</view>
		<view class="modCon">
			<mod-tit modTit="过往经历" smTit="必填" :mustFlag="true"></mod-tit>
			<view class="experienceItem">
				<view class="experTit">1.你是否接受过心理咨询?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in xlzxArr"
						:key="index"
						@tap="selectXlzx(index,item.name)"
					>
						<view class="radView" :class="[xlzxIndex == index ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="experienceItem">
				<view class="experTit">2.你是否接受过精神科相关的诊断或治疗?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in jszdArr"
						:key="index"
						@tap="selectJsk(index,item.name)"
					>
						<view class="radView" :class="[jszdIndex == index ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="experienceItem">
				<view class="experTit">3.你是否有过自伤/自杀的想法或行为?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in zsArr"
						:key="index"
						@tap="selectZx(index,item.name)"
					>
						<view class="radView" :class="[zsIndex == index ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="experienceItem">
				<view class="experTit">4.你是从哪知道该平台的?</view>
				<view class="experCon">
					<view class="itemRadCon spec"
						v-for="(item,index) in knowArr"
						:key="index"
						@tap="selectKnow(index,item.name)"
					>
						<view class="radView" :class="[knowIndex == index ? 'active' : '']"><view class="iconfont icon-xuanze"></view></view>
						<view class="radTit">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="botBtnGroup">
			<button class="comBtn" @tap="save" :disabled="isDisabledFlag">保存</button>
		</view>
	</view>
</template>

<script>
	import { addZxUser } from '@/api/xlzx/index'
	import ModTit from '@/components/mod-tit/mod-tit.vue'
	export default {
		components:{
			ModTit
		},
		data(){
			return{
				relationArr:[{name:'亲友'},{name:'父母'},{name:'兄妹'},{name:'夫妻'}],
				relationIndex:0,
				relationVal:'亲友',
				sexArr:[{name:'男'},{name:'女'}],//性别
				sexIndex:0,
				sexVal:'男',
				userName:'',
				phoneNum:'',
				lxrName:'',
				lxrTel:'',
				xlzxArr:[{name:'是'},{name:'否'}],//是否接受过心理咨询
				xlzxIndex:-1,
				xlzxVal:'',
				jszdArr:[{name:'是'},{name:'否'}],//是否有精神科相关诊断/治疗
				jszdIndex:-1,
				jszVal:'',
				zsArr:[{name:'是'},{name:'否'}],//是否有过自杀/伤行为
				zsIndex:-1,
				zsVal:'',
				knowArr:[{name:'微信'},{name:'朋友介绍'}],//通过哪知道我们平台
				knowIndex:-1,
				knowVal:'',
				nmTag:1,//默认不匿名 1否 2是
				isDisabledFlag:false
			}
		},
		methods:{
			save(){
				if(this.userName == ''){
					this.util.showToast('姓名不能为空');
				}else if(this.phoneNum == ''){
					this.util.showToast('联系电话不能为空');
				}else if(!this.regX.regPhone.test( this.phoneNum )){
					this.util.showToast('请输入正确的联系方式');
				}else if(this.lxrName == ''){
					this.util.showToast('请输入紧急联系人姓名');
				}else if(this.lxrTel == ''){
					this.util.showToast('紧急联系人电话不能为空');
				}else if(!this.regX.regPhone.test( this.lxrTel )){
					this.util.showToast('紧急联系人电话格式不对');
				}else if(this.xlzxVal == ''){
					this.util.showToast('请选择您是否接受过心理咨询');
				}else if(this.jszVal == ''){
					this.util.showToast('请选择您是否有精神科相关诊断/治疗');
				}else if(this.zsVal == ''){
					this.util.showToast('请选择您是否有过自杀/伤行为');
				}else if(this.knowVal == ''){
					this.util.showToast('请选择您是通过哪知道我们平台');
				}else{
					var experienceStr = this.xlzxVal + ',' + this.jszVal + ',' + this.zsVal + ',' + this.knowVal
					var field = { zxrName:this.userName,zxrMobile:this.phoneNum,nmTag:this.nmTag,sex:this.sexVal,currInfo:'',
									lxrName:this.lxrName,lxrMobile:this.lxrTel,relation:this.relationVal,experience:experienceStr
								};
					this.isDisabledFlag = true;
					uni.showLoading({ title: '提交中...', mask: true }); 
					addZxUser(field).then(res=>{
						this.util.showToastSuc('提交成功');
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.isRefreshFlag = true;
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500);
					}).catch(err=>{
						console.log(err)
						this.isDisabledFlag = false;
					});
				}
			},
			selectSex(index,name){
				this.sexIndex = index;
				this.sexVal = name;
			},
			bindSelect(e){
				this.relationIndex = e.target.value;
				this.relationVal = this.relationArr[this.relationIndex].name;
			},
			selectXlzx(index,name){
				this.xlzxIndex = index;
				this.xlzxVal = name;
			},
			selectJsk(index,name){
				this.jszdIndex = index;
				this.jszVal = name;
			},
			selectZx(index,name){
				this.zsIndex = index;
				this.zsVal = name;
			},
			selectKnow(index,name){
				this.knowIndex = index;
				this.knowVal = name;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tips{
		background: $pss-color-blue-lighter;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: $pss-color-blueDeep;
		padding: 30rpx 20rpx;
		margin-bottom: 30rpx;
	}
	.modCon{
		padding: 20rpx;
		box-shadow: 0 0 16rpx rgba(127, 188, 255, .2);
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
	.formItem{
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		.formTit{
			width: 160rpx;
			height: 100%;
			line-height: 90rpx;
			font-size: $font-size28;
			color: $pss-text-color3;
			flex-shrink: 0;
		}
		.formItemCon{
			width: 76%;
			height: 90rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.formInp{
				width: 90%;
				height: 100%;
				text-align: right;
				font-size: $font-size28;
				color: $pss-text-color3; 
				padding: 0 5%;
			}
		}
		.sexTag{
			padding: 0 30rpx;
			height: 48rpx;
			background: #F4F5F7;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: $font-size28; 
			margin-left: 40rpx;
			border-radius: 10rpx;
			border: 1rpx solid #F4F5F7;
			color: $pss-text-color8;
			&.active{
				background: $pss-color-blue-lighter;
				color: $pss-color-blueDeep;
				border: 1rpx solid $pss-color-blueDeep;
			}
		}
		/* 紧急联系人 */
		.zxrPicker{
			width: 100%;
			height: 100%;
			line-height: 90rpx;
			text-align: right;
			font-size: $font-size28;
			color: $pss-text-color3;
			.icon-sanjiao{
				color: $pss-text-colora;
			}
		}
	}
	.itemRadCon{
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: $font-size28; 
		.radView{
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			border: 1rpx solid #eee;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			margin-right: 10rpx;
			.icon-duihao{
				font-size: $font-size24;
			}
			&.active{
				border: 1rpx solid $pss-color-blueDeep;
				background: $pss-color-blueDeep;
			}
		}
		.radTit{
			color: $pss-text-color3;
			&.hasBold{
				font-weight: bold;
			}
		}
		&.spec{
			justify-content: flex-start !important;
		}
	}
	/* 过往经历 */
	.experienceItem{
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
		.experTit{
			font-size: $font-size26;
			color: $pss-text-color8;
			margin-bottom: 10rpx;
		}
		.experCon{
			display: flex;
			height: 70rpx;
		}
	}
	.botBtnGroup{
		width: 100%;
		height: 120rpx;
		position: sticky;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -10rpx 10rpx rgba(127, 188, 255, .1);
		display: flex;
		align-items: center;
		--sonHei:80rpx;
		.comBtn{
			flex: 1;
			height: var(--sonHei);
			border-radius: 50rpx;
			line-height: var(--sonHei);
			font-size: 30rpx;
		}
	}
</style>